.tab-panel{
   flex:auto;
   display: flex;
   border: solid 1px #efefef;
   border-collapse: collapse;
   overflow: hidden;
   &.bottom{
     flex-direction: column-reverse;
     .headers{
         margin-bottom: .3rem;
         flex-direction: row;
         border-top:solid 1px #efefef;
         height: 2.5rem;
         >i{
           line-height: 2.5rem;
           padding: 0 .5rem;
         }
         >.rect{
           overflow: hidden;

           >.scroll{
             position: absolute;
             left:0;
             top:0;
             display: flex;
             flex-direction: row;
             .head{
               border-top: none;
               line-height: 2.3rem;
               margin-left: .5rem;
               &.active{
                 border-top: solid 2px #5985f7;
                 position: relative;
                 top: -1px;
               }
             }
           }
         }

     }
   }
   &.top{
     flex-direction: column;

     >.headers{
         margin-top: .3rem;
         flex-direction: row;
         border-bottom: solid 1px #efefef;
         height: 2.5rem;
         >i{
           line-height: 2.5rem;
           padding: 0 .5rem;

         }
         >.rect{
           overflow: hidden;
           >.scroll{
             position: absolute;
             left:0;
             top:0;
             display: flex;
             flex-direction: row;
               >.head{
                 border-bottom: none;
                 margin-left: .5rem;
                 line-height: 2.3rem;
                 &.active{
                   border-bottom: solid 2px #5985f7;
                   position: relative;
                   bottom: -1px;
                 }
               }

           }
         }


     }
   }
   &.left{
      flex-direction: row;

      .headers{
        border-right: solid 1px #efefef;
        margin-left: .3rem;
          flex-direction: column;
          >i{
            line-height: 1.5rem;
            text-align: center;
          }
          >.rect{
            overflow: hidden;
            >.scroll{
              >.head{
                border-right: none;
                margin-top: .5rem;
                &.active{
                  border-right: solid 2px #5985f7;
                  position: relative;
                  right: -1px;
                }
              }
            }
          }

      }
   }
   &.right{
     flex-direction: row-reverse;

     .headers{
         margin-right: .3rem;
         flex-direction: column;
         border-left: solid 1px #efefef;
         >i{
           line-height: 1.5rem;
           text-align: center;
         }
         >.rect{
           overflow: hidden;
           >.scroll{
             >.head{
               border-left: none;
               margin-top: .5rem;
               &.active{
                 position: relative;
                 border-left:  solid 2px #5985f7;
                 left: -1px;
               }

             }
           }
         }

     }
   }

   >.headers{
      display: flex;
      flex-direction: row;
      >i{
        position: relative;
        background: #fff;
        line-height: 2.5rem;
        padding: 0 .5rem;
        cursor: pointer;
        &:hover{
          color: #389fee;
        }
      }
      >.rect{
        flex: 1;
        position: relative;

        >.scroll{

          >.head{
             border:solid 1px #efefef;
             line-height: 2.5rem;
             padding: 0 1rem;
             cursor: pointer;
             white-space:nowrap;
             background-color: #efefef;
             color:#666;
             &.active{
                background-color: #fff;
                color:#444;
             }
             >i{
               position: relative;
               right: -.5rem;
               font-size: .8rem;
               top:-.5rem;
               color: #ccc;
               &:hover{
                 color: rgb(135, 161, 222)
               }
             }
          }
        }
      }

   }
   >.bodys{
     display: flex;
     flex-direction: row;
     flex:auto;
     background-color: #fff;
     >.body{
       flex:1;
       overflow: auto;
       &.active{
         display: block;

       }
       &.hide{
         display:none;
       }
     }


   }
}
